<template>
	<view class="main">
		<u-navbar
			title="修改手机号"
			placeholder
			@leftClick="back"
		>
		<view class="right" :class="{disabled: !form.mobile}" slot="right" @click="submit">保存</view>
		</u-navbar>
		<u--form 
		labelPosition="left" 
		labelWidth="70"
		:model="form" 
		:rules="rules" 
		errorType="border-bottom"
		ref="uForm" 
		:labelStyle="{color:'#000'}">
			<u-form-item  prop="mobile" borderBottom>
				<u--input 
				v-model="form.mobile" 
				placeholder="请输入手机号" 
				border="none"></u--input>
			</u-form-item>
		</u--form>
		<!-- <view class="submit">
			<u-button color="#666666" shape="circle" @click="back">取消</u-button>
			<u-button :loading="loading" color="#EFBE62" shape="circle" @click="submit">确定</u-button>
		</view> -->
		<CodePopup
		title="绑定手机号"
		btnText="确定绑定"
		:loading="loading"
		@show="e=>codeShow=e" 
		:show="codeShow" 
		:username="form.mobile" 
		v-model="form.verify_code" 
		@submit="setModile"
		></CodePopup>
	</view>
</template>

<script>
	import CodePopup from '@/components/codePopup.vue'
	import {mixin} from '@/Mixins/mixin.js'
	import { mapState, mapMutations } from 'vuex'
	export default {
		mixins:[mixin],
		components: {
			CodePopup
		},
		data() {
			return {
				loading:false,
				codeShow:false,
				form:{
					mobile :'',//昵称
					verify_code:''
				},
				rules: {
					mobile : [
						{
							required: true,
							message: '请输入昵称',
							trigger: ['blur', 'change']
						}
					],
					
				}
			}
		},
		onShow() {
			this.form.mobile = this.userInfo.mobile
		},
		onLoad() {
			
		},
		computed: {
			...mapState(['userInfo','token'])
		},
		methods: {
			submit() {
				this.$refs.uForm.validate().then(res => {
					this.loading = false
					this.codeShow=true
					//
					
				}).catch(errors => {
					// uni.$u.toast('校验失败')
				})
			},
			setModile(){
				this.loading=true
				 this.setMemberInfo(this.form)
				 this.loading=false
			},
			back(){
				uni.$u.route({
					type:'redirect',
					url: '/pages/UserInfo/index'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	// #ifdef H5||APP
	.main{
		min-height: 100vh;
		padding: 112rpx 30rpx;
		box-sizing: border-box;
		background-color: $nft-bg-color;
		::v-deep .u-form-item__body{
			padding: 30rpx 0;
		}
		.right {
			font-size: 28rpx;
			font-weight: 600;
			color: #468EFF;
		}
		.submit{
			margin-top: 60rpx;
			display: flex;
			align-items: center;
			justify-content: space-between
			::v-deep button{
				width: 332rpx;
				height: 92rpx;
				&:nth-child(1){
					color: #FFFFFF!important;
				}
				&:nth-child(2){
					color: #333333!important;
				}
			}
		}
		
	}
	
	// #endif
	
</style>
